<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
       <div class=" mt-4  pb-4 f-b " style="font-size: 24px">
           Customer table
       </div>
       <div style="font-size: 18px;">
           Default
       </div>

       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex flex-column" style="width: 100%">
                   <div class="col-10 p-0">
                       <div class=" p-4 br-1 br-grey100 br-ra4">
                           <table class="unis-info-table">
                               <thead>
                               <tr>

                                   <th>Task name</th>
                                   <th>Reference</th>
                                   <th>Pickup Date</th>
                                   <th>Origin</th>
                                   <th>Destination</th>
                                   <th>Pallets</th>
                                   <th class="d-flex align-items-center">Status <i class="icon-77 cursor-p ml-2"></i></th>
                               </tr>
                               </thead>
                               <tbody>
                               <tr v-for="i in 10" >
                                   <td>
                                       New customer  onboarding
                                   </td>
                                   <td :class="{'ft-pink900':(i==1||i==2)}">Aug 10, 2020</td>
                                   <td>Hawthorne,  CA
                                   </td>
                                   <td>3</td>
                                   <td>Los Angeles, CA</td>
                                   <td>04/12/2018</td>
                                   <td>
                                       <button v-if="i===10" class="unis-token bg-pink100 ft-pink900">Requires action</button>
                                       <button v-if="i===1" class="unis-token bg-pink100 ft-pink900">Requires action</button>
                                       <button v-if="i===2" class="unis-token bg-yellow200 ft-yellow900">Expires soon - 2 days</button>
                                       <button v-if="i===3" class="unis-token bg-yellow200 ft-yellow900">Expires soon - 5 days</button>
                                       <button v-if="i===4" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                       <button v-if="i===5" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                       <button v-if="i===6" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                       <button v-if="i===7" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                       <button v-if="i===8" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                       <button v-if="i===9" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                                   </td>

                               </tr>

                               </tbody>
                           </table>

                           <div class="unis-pager wid-100 d-flex  justify-content-end">
                               <div class="paginate mb-2 d-flex flex-column justify-content-center">
                                   <ul class="paginate-sm d-flex justify-content-center align-items-center">
                                       <li class="p-2">10 Results</li>
                                       <li class="pr-2">Show:</li>
                                       <li class="pr-3">
                                           <button class="unis-select unis-dropdown h-24">
                                               10
                                               <ul>
                                                   <li v-for="i in [5,10,15,20]">{{i}}</li>
                                               </ul>
                                           </button>
                                       </li>
                                       <li class="prev" onclick="">
                                           <button class="unis-btn default ">
                                               <i class="icon-15"></i>
                                           </button>
                                       </li>
                                       <li onclick="">
                                           <button class="suspend  unis-btn">1...3</button>
                                       </li>
                                       <li class="prev" onclick="">
                                           <button class="suspend present unis-btn">4</button>
                                       </li>
                                       <li class="prev" onclick="">
                                           <button class="suspend  unis-btn">5...7</button>
                                       </li>
                                       <li class="next" onclick="">
                                           <button class="unis-btn default ">
                                               <i class="icon-8"></i>
                                           </button>
                                       </li>
                                   </ul>
                               </div>
                           </div>
                       </div>
                   </div>

               </div>

           </template>
           <template v-slot:htmcode>
               <div class=" p-4 br-1 br-grey100 br-ra4">
                   <table class="unis-info-table">
                       <thead>
                       <tr>

                           <th>Task name</th>
                           <th>Reference</th>
                           <th>Pickup Date</th>
                           <th>Origin</th>
                           <th>Destination</th>
                           <th>Pallets</th>
                           <th class="d-flex align-items-center">Status <i class="icon-77 cursor-p ml-2"></i></th>
                       </tr>
                       </thead>
                       <tbody>
                       <tr v-for="i in 10" >
                           <td>
                               New customer  onboarding
                           </td>
                           <td :class="{'ft-pink900':(i==1||i==2)}">Aug 10, 2020</td>
                           <td>Hawthorne

                           </td>
                           <td>3</td>
                           <td>Los Angeles, CA</td>
                           <td>04/12/2018</td>
                           <td>
                               <button v-if="i===10" class="unis-token bg-pink100 ft-pink900">Requires action</button>
                               <button v-if="i===1" class="unis-token bg-pink100 ft-pink900">Requires action</button>
                               <button v-if="i===2" class="unis-token bg-yellow200 ft-yellow900">Expires soon - 2 days</button>
                               <button v-if="i===3" class="unis-token bg-yellow200 ft-yellow900">Expires soon - 5 days</button>
                               <button v-if="i===4" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                               <button v-if="i===5" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                               <button v-if="i===6" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                               <button v-if="i===7" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                               <button v-if="i===8" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                               <button v-if="i===9" class="unis-token bg-accentblue200 ft-accentblue900">Open</button>
                           </td>

                       </tr>

                       </tbody>
                   </table>

                   <div class="unis-pager wid-100 d-flex  justify-content-end">
                       <div class="paginate mb-2 d-flex flex-column justify-content-center">
                           <ul class="paginate-sm d-flex justify-content-center align-items-center">
                               <li class="p-2">10 Results</li>
                               <li class="pr-2">Show:</li>
                               <li class="pr-3">
                                   <button class="unis-select unis-dropdown h-24">
                                       10
                                       <ul>
                                           <li v-for="i in [5,10,15,20]">{{i}}</li>
                                       </ul>
                                   </button>
                               </li>
                               <li class="prev" onclick="">
                                   <button class="unis-btn default active">
                                       <i class="icon-15"></i>
                                   </button>
                               </li>
                               <li onclick="">
                                   <button class="suspend  unis-btn">1...3</button>
                               </li>
                               <li class="prev" onclick="">
                                   <button class="suspend present unis-btn">4</button>
                               </li>
                               <li class="prev" onclick="">
                                   <button class="suspend  unis-btn">5...7</button>
                               </li>
                               <li class="next" onclick="">
                                   <button class="unis-btn default active">
                                       <i class="icon-8"></i>
                                   </button>
                               </li>
                           </ul>
                       </div>
                   </div>
               </div>
           </template>
       </dfault-vuew>
       <div style="font-size: 18px; margin-top: 60px">
           Table with “more” icon
       </div>

       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex flex-column" style="width: 100%">
                   <div class="col-10 p-0">
                       <div class=" p-4 br-1 br-grey100 br-ra4">
                           <table class="unis-info-table">
                               <thead>
                               <tr>
                                   <th>Company name <i class="icon-78 ml-2  "></i> <span class="f-12 f-b">AZ</span></th>
                                   <th>Shipping address</th>
                                   <th>Phone number</th>
                                   <th></th>

                               </tr>
                               </thead>
                               <tbody>
                               <tr v-for="i in 6">
                                   <td>
                                       Best buy
                                   </td>
                                   <td>1701 N Central Ave, Los Angeles, CA 90059</td>
                                   <td>(562) 443-9575
                                   </td>
                                   <td  class="d-flex justify-content-end align-items-center">
                                       <div :class="{'active':i ===3}" class="unis-icon-btn unis-dropdown unis-icon-btn-option br-white h-w-32  ">
                                           <span class="icon-57 f-20"></span>
                                           <ul class="right">
                                               <li>Option 1</li>
                                               <li>Option 2</li>
                                           </ul>
                                       </div>
                                   </td>

                               </tr>
                               </tbody>
                           </table>
                       </div>
                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class=" p-4 br-1 br-grey100 br-ra4">
                   <table class="unis-info-table">
                       <thead>
                       <tr>
                           <th>Company name <i class="icon-78 ml-2  "></i> <span class="f-12 f-b">AZ</span></th>
                           <th>Shipping address</th>
                           <th>Phone number</th>
                           <th></th>

                       </tr>
                       </thead>
                       <tbody>
                       <tr v-for="i in 6">
                           <td>
                               Best buy
                           </td>
                           <td>1701 N Central Ave, Los Angeles, CA 90059</td>
                           <td>(562) 443-9575
                           </td>
                           <td  class="d-flex justify-content-end align-items-center">
                               <div :class="{'active':i ===3}" class="unis-icon-btn unis-dropdown unis-icon-btn-option br-white h-w-32  ">
                                   <span class="icon-57"></span>
                                   <ul class="right">
                                       <li>Option 1</li>
                                       <li>Option 2</li>
                                   </ul>
                               </div>
                           </td>

                       </tr>
                       </tbody>
                   </table>
               </div>
           </template>
       </dfault-vuew>
       <div style="font-size: 24px; margin-top: 120px" class="f-b">
           Table with selection
       </div>

       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex flex-column" style="width: 100%">
                   <div class="col-10 p-0">
                       <div class=" p-4 br-1 br-grey100 br-ra4">
                           <table class="unis-info-table">
                               <thead>
                               <tr>
                                   <th> </th>
                                   <th>Invoice #</th>
                                   <th>PRO #</th>
                                   <th>Issue date</th>
                                   <th>Due date</th>
                                   <th>Status <i class="icon-78 ml-2  "></i></th>
                                   <th>Total amount</th>
                                   <th></th>

                               </tr>
                               </thead>
                               <tbody>
                               <tr v-for="i in 3">
                                   <td>
                                       <input type="checkbox" name="layout" :id="'invoice'+i" class="unis-checkbox">
                                       <label :for="'invoice'+i">
                                           <span class="pl-3_5"></span>
                                       </label>
                                   </td>
                                   <td>2773225-1</td>
                                   <td>PRO-1234567  </td>
                                   <td :class="{'ft-red900':(i===1||i===2)}">12/12/2021</td>
                                   <td>12/21/2021</td>
                                   <td><button class="unis-token bg-red200 ft-red900 ">Past due</button></td>
                                   <td class="f-b f-16"> $10,000.00</td>
                                   <td  >
                                       <button class="unis-btn unis-btn-link compact f-16"> Pay invoice</button>
                                   </td>

                               </tr>
                               </tbody>
                           </table>
                       </div>
                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class=" p-4 br-1 br-grey100 br-ra4">
                   <table class="unis-info-table">
                       <thead>
                       <tr>
                           <th> </th>
                           <th>Invoice #</th>
                           <th>PRO #</th>
                           <th>Issue date</th>
                           <th>Due date</th>
                           <th>Status <i class="icon-78 ml-2  "></i></th>
                           <th>Total amount</th>
                           <th></th>

                       </tr>
                       </thead>
                       <tbody>
                       <tr v-for="i in 3">
                           <td>
                               <input type="checkbox" name="layout" :id="'invoice'+i" class="unis-checkbox">
                               <label :for="'invoice'+i">
                                   <span class="pl-3_5"></span>
                               </label>
                           </td>
                           <td>2773225-1</td>
                           <td>PRO-1234567  </td>
                           <td :class="{'ft-red900':(i===1||i===2)}">12/12/2021</td>
                           <td>12/21/2021</td>
                           <td><button class="unis-token bg-red200 ft-red900 ">Past due</button></td>
                           <td class="f-b f-16"> $10,000.00</td>
                           <td  >
                               <button class="unis-btn unis-btn-link compact f-16"> Pay invoice</button>
                           </td>

                       </tr>
                       </tbody>
                   </table>
               </div>
           </template>
       </dfault-vuew>

    <div style="font-size: 18px; margin-top: 120px" class="f-b">
        Batch selection
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-8 p-0">
                    <div class=" br-1 br-grey100 br-ra4 pb-4">
                        <table class="unis-info-table unis-left-br-td-bg">
                            <thead>
                            <tr>
                                <th width="60"><input type="checkbox" name="layout" id="colspan" class="unis-checkbox">
                                    <div class="col-3 p-0">
                                        <input type="checkbox" checked name="layout" id="cd4as" class="unis-ridurre">
                                        <label for="cd4as">
                                            <span class="pl-3_5"></span>
                                        </label>
                                    </div>
                                </th>
                                <th colspan="7">
                                    <div class="d-flex">
                                        <div class="unis-multiselect active col-2">
                                            <i class="newicon-89 f-14 mr-2"></i>
                                            <input type="text" value="Pay selected invoices (3)"
                                                   placeholder="Enter A Keyword..." class="unis-input">
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="i in 3" class="bg">
                                <td><input type="checkbox" name="layout" :id="'colspan'+i" class="unis-checkbox">
                                    <label :for="'colspan'+i">
                                        <span class="pl-3_5"></span>
                                    </label>
                                </td>
                                <td>2773225-1</td>
                                <td>PRO-1234567</td>
                                <td>12/12/2021</td>
                                <td>12/21/2021</td>
                                <td><span class="unis-status bg-red200 ft-red900">Schedule pick up</span></td>
                                <td>$10,000.00</td>
                                <td></td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class=" br-1 br-grey100 br-ra4 pb-4">
                <table class="unis-info-table unis-left-br-td-bg">
                    <thead>
                    <tr>
                        <th width="60"><input type="checkbox" name="layout" id="colspan" class="unis-checkbox">
                            <div class="col-3 p-0">
                                <input type="checkbox" checked name="layout" id="cd4as" class="unis-ridurre">
                                <label for="cd4as">
                                    <span class="pl-3_5"></span>
                                </label>
                            </div>
                        </th>
                        <th colspan="7">
                            <div class="d-flex">
                                <div class="unis-multiselect active col-2">
                                    <i class="newicon-89 f-14 mr-2"></i>
                                    <input type="text" value="Pay selected invoices (3)"
                                           placeholder="Enter A Keyword..." class="unis-input">
                                </div>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="i in 3" class="bg">
                        <td><input type="checkbox" name="layout" :id="'colspan'+i" class="unis-checkbox">
                            <label :for="'colspan'+i">
                                <span class="pl-3_5"></span>
                            </label>
                        </td>
                        <td>2773225-1</td>
                        <td>PRO-1234567</td>
                        <td>12/12/2021</td>
                        <td>12/21/2021</td>
                        <td><span class="unis-status bg-red200 ft-red900">Schedule pick up</span></td>
                        <td>$10,000.00</td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </template>
    </dfault-vuew>
    <div style="font-size: 18px; margin-top: 120px" class="f-b">
        No results
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-8 p-0">
                    <table class="unis-info-table">
                        <thead style="display: none">
                        <tr>
                            <th>Company</th>
                            <th>Reference #</th>
                            <th>Pickup Date</th>
                            <th>Origin</th>
                            <th>Delivery Date</th>
                            <th>Destination</th>
                            <th>Pallets</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="8 " class="pl-0 pr-0 br-white">
                                <div class="unis-mpty-tbody">No results found for “keyword”</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <table class="unis-info-table">
                <thead style="display: none">
                <tr>
                    <th>Company</th>
                    <th>Reference #</th>
                    <th>Pickup Date</th>
                    <th>Origin</th>
                    <th>Delivery Date</th>
                    <th>Destination</th>
                    <th>Pallets</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="8 " class="pl-0 pr-0 br-white">
                        <div class="unis-mpty-tbody">No results found for “keyword”</div>
                    </td>
                </tr>
                </tbody>
            </table>
        </template>
    </dfault-vuew>

    <div style="font-size: 24px; margin-top: 80px" class="f-b">
        Card table - default
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-8 p-0">
                    <table class="unis-card-table">
                        <thead>
                        <tr>
                            <th>PRO #</th>
                            <th>Reference #</th>
                            <th>Pickup Date</th>
                            <th>Origin</th>
                            <th>Delivery Date</th>
                            <th>Destination</th>
                            <th>Pallets</th>
                            <th>Weight</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="index in 6" :class="{'active':index ===3}">
                            <td>Los Angeles, CA</td>
                            <td>04/12/2018</td>
                            <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                <span class="f-13"> City, State</span></td>
                            <td>3</td>
                            <td>Los Angeles, CA</td>
                            <td>04/12/2018</td>
                            <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                <span class="f-13"> City, State</span></td>
                            <td>100</td>
                            <td>
                                <span class="unis-status bg-red200 ft-red900 br-ra4"
                                      v-if="index == 1">Schedule pick up</span>
                                <span class="unis-status bg-grey200 ft-grey900 br-ra4" v-if="index == 2">Schedule pick up</span>
                                <span class="unis-status bg-accentblue200 ft-accentblue900 br-ra4" v-if="index == 3">Schedule pick up</span>
                                <span class="unis-status bg-yellow200 ft-yellow900 br-ra4" v-if="index == 4">Schedule pick up</span>
                                <span class="unis-status bg-grassgreen200 ft-grassgreen900 br-ra4" v-if="index == 5">Schedule pick up</span>
                                <span class="unis-status bg-lavender200 ft-lavender900 br-ra4" v-if="index == 6">Schedule pick up</span>
                                <img src="./img/warning-mark.svg" alt="" class="ml-2" v-if="index == 2">

                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <table class="unis-card-table">
                <thead>
                <tr>
                    <th>PRO #</th>
                    <th>Reference #</th>
                    <th>Pickup Date</th>
                    <th>Origin</th>
                    <th>Delivery Date</th>
                    <th>Destination</th>
                    <th>Pallets</th>
                    <th>Weight</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="index in 6" :class="{'active':index ===3}">
                    <td>Los Angeles, CA</td>
                    <td>04/12/2018</td>
                    <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                        <span class="f-13"> City, State</span></td>
                    <td>3</td>
                    <td>Los Angeles, CA</td>
                    <td>04/12/2018</td>
                    <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                        <span class="f-13"> City, State</span></td>
                    <td>100</td>
                    <td>
                        <span class="unis-status bg-red200 ft-red900 br-ra4" v-if="index == 1">Schedule pick up</span>
                        <span class="unis-status bg-grey200 ft-grey900 br-ra4" v-if="index == 2">Schedule pick up</span>
                        <span class="unis-status bg-accentblue200 ft-accentblue900 br-ra4" v-if="index == 3">Schedule pick up</span>
                        <span class="unis-status bg-yellow200 ft-yellow900 br-ra4"
                              v-if="index == 4">Schedule pick up</span>
                        <span class="unis-status bg-grassgreen200 ft-grassgreen900 br-ra4" v-if="index == 5">Schedule pick up</span>
                        <span class="unis-status bg-lavender200 ft-lavender900 br-ra4" v-if="index == 6">Schedule pick up</span>
                        <img src="./img/warning-mark.svg" alt="" class="ml-2" v-if="index == 2">

                    </td>
                </tr>

                </tbody>
            </table>
        </template>
    </dfault-vuew>

    <div style="font-size: 18px; margin-top: 80px" class="f-b">
        Card row - pressed
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-8 p-0">
                    <table class="unis-card-table">
                        <thead>
                        <tr>
                            <th>PRO #</th>
                            <th>Reference #</th>
                            <th>Pickup Date</th>
                            <th>Origin</th>
                            <th>Delivery Date</th>
                            <th>Destination</th>
                            <th>Pallets</th>
                            <th>Weight</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="index in 1" :class="{'active':index ===1}">
                            <td>Los Angeles, CA</td>
                            <td>04/12/2018</td>
                            <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                <span class="f-13"> City, State</span></td>
                            <td>3</td>
                            <td>Los Angeles, CA</td>
                            <td>04/12/2018</td>
                            <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                                <span class="f-13"> City, State</span></td>
                            <td>100</td>
                            <td>
                                <span class="unis-status bg-red200 ft-red900 br-ra4"
                                      v-if="index == 1">Schedule pick up</span>

                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <table class="unis-card-table">
                <thead>
                <tr>
                    <th>PRO #</th>
                    <th>Reference #</th>
                    <th>Pickup Date</th>
                    <th>Origin</th>
                    <th>Delivery Date</th>
                    <th>Destination</th>
                    <th>Pallets</th>
                    <th>Weight</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="index in 1" :class="{'active':index ===1}">
                    <td>Los Angeles, CA</td>
                    <td>04/12/2018</td>
                    <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                        <span class="f-13"> City, State</span></td>
                    <td>3</td>
                    <td>Los Angeles, CA</td>
                    <td>04/12/2018</td>
                    <td><span class="f-13 f-b">Hawthorne, CA </span><br>
                        <span class="f-13"> City, State</span></td>
                    <td>100</td>
                    <td>
                        <span class="unis-status bg-red200 ft-red900 br-ra4" v-if="index == 1">Schedule pick up</span>

                    </td>
                </tr>

                </tbody>
            </table>
        </template>
    </dfault-vuew>
    <div style="font-size: 18px; margin-top: 80px" class="f-b">
        Card table - color
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex flex-column" style="width: 100%">
                <div class="col-8 p-0">
                    <table class="unis-card-table unis-left-card-br  unis-td-bg-b">
                        <tbody>
                        <tr v-for="index in 3" :class="{'active':index ===3}">
                            <td>Jane Doe</td>
                            <td>7:00 am - 8:00 am</td>
                            <td><span>Service A </span><br>
                                <span class="f-12 ft-grey500"> ABCD</span></td>
                            <td>Add-on ABC</td>

                            <td><span class="unis-status bg-red200 ft-red900 br-ra4"
                                      v-if="index == 1">Schedule pick up</span></td>
                            <td>
                                <div class="unis-icon-btn  unis-dropdown unis-icon-btn-option h-w-40  ">
                                    <span class="icon-57 f-20" ></span>
                                    <ul class="right">
                                        <li>Option 1</li>
                                        <li>Option 2</li>
                                    </ul>
                                </div>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <table class="unis-card-table unis-left-card-br  unis-td-bg-b">
                <tbody>
                <tr v-for="index in 3" :class="{'active':index ===3}">
                    <td>Jane Doe</td>
                    <td>7:00 am - 8:00 am</td>
                    <td><span>Service A </span><br>
                        <span class="f-12 ft-grey500"> ABCD</span></td>
                    <td>Add-on ABC</td>

                    <td><span class="unis-status bg-red200 ft-red900 br-ra4"
                              v-if="index == 1">Schedule pick up</span></td>
                    <td>
                        <div class="unis-icon-btn  unis-dropdown unis-icon-btn-option h-w-40  ">
                            <span class="icon-57 f-20" ></span>
                            <ul class="right">
                                <li>Option 1</li>
                                <li>Option 2</li>
                            </ul>
                        </div>
                    </td>

                </tr>

                </tbody>
            </table>
        </template>
    </dfault-vuew>


    <div style="height: 80px;">

    </div>

</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>